/*! hextech-css | MIT License | github.com/pxlucasf/hextech-css */

@font-face {
  font-family: 'Beaufort';
  src: url('fonts/Beaufort-Regular.woff') format('woff'), url('fonts/Beaufort-Regular.ttf') format('truetype')
}

@font-face {
  font-family: 'Beaufort';
  src: url('fonts/Beaufort-Bold.woff') format('woff'), url('fonts/Beaufort-Bold.ttf') format('truetype');
  font-weight: bold
}

@font-face {
  font-family: 'Spiegel';
  src: url('fonts/Spiegel-Regular.woff') format('woff'), url('fonts/Spiegel-Regular.ttf') format('truetype')
}

@font-face {
  font-family: 'Spiegel';
  src: url('fonts/Spiegel-Italic.woff') format('woff'), url('fonts/Spiegel-Italic.ttf') format('truetype');
  font-style: italic
}

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal
}

ul {
  list-style: none
}

button,
input,
select,
textarea {
  margin: 0
}

html {
  box-sizing: border-box
}

*,
*::before,
*::after {
  box-sizing: inherit
}

img,
video {
  height: auto;
  max-width: 100%
}

iframe {
  border: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

td,
th {
  padding: 0
}

td:not([align]),
th:not([align]) {
  text-align: left
}

body {
  font-family: Spiegel
}

.row.is-mobile {
  display: flex
}

.row:not(:last-child) {
  margin-bottom: calc(1.5rem - .75rem)
}

.row.is-multiline {
  flex-wrap: wrap
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: .75rem;
  box-sizing: border-box
}

.row.is-gapless .column {
  padding: 0
}

@media screen and (max-width:768px) {
  .column.is-1-mobile,
  .column.is-2-mobile,
  .column.is-3-mobile,
  .column.is-4-mobile,
  .column.is-5-mobile,
  .column.is-6-mobile,
  .column.is-7-mobile,
  .column.is-8-mobile,
  .column.is-9-mobile,
  .column.is-10-mobile,
  .column.is-11-mobile,
  .column.is-12-mobile {
    flex: none
  }
  .column.is-1-mobile {
    width: 8.33333%
  }
  .column.is-2-mobile {
    width: 16.66667%
  }
  .column.is-3-mobile {
    width: 25%
  }
  .column.is-4-mobile {
    width: 33.33333%
  }
  .column.is-5-mobile {
    width: 41.66667%
  }
  .column.is-6-mobile {
    width: 50%
  }
  .column.is-7-mobile {
    width: 58.33333%
  }
  .column.is-8-mobile {
    width: 66.66667%
  }
  .column.is-9-mobile {
    width: 75%
  }
  .column.is-10-mobile {
    width: 83.33333%
  }
  .column.is-11-mobile {
    width: 91.66667%
  }
  .column.is-12-mobile {
    width: 100%
  }
}

@media screen and (min-width:769px) {
  .row {
    display: flex
  }
  .column.is-1,
  .column.is-2,
  .column.is-3,
  .column.is-4,
  .column.is-5,
  .column.is-6,
  .column.is-7,
  .column.is-8,
  .column.is-9,
  .column.is-10,
  .column.is-11,
  .column.is-12,
  .column.is-1-tablet,
  .column.is-2-tablet,
  .column.is-3-tablet,
  .column.is-4-tablet,
  .column.is-5-tablet,
  .column.is-6-tablet,
  .column.is-7-tablet,
  .column.is-8-tablet,
  .column.is-9-tablet,
  .column.is-10-tablet,
  .column.is-11-tablet,
  .column.is-12-tablet {
    flex: none
  }
  .column.is-1,
  .column.is-1-tablet {
    width: 8.33333%
  }
  .column.is-2,
  .column.is-2-tablet {
    width: 16.66667%
  }
  .column.is-3,
  .column.is-3-tablet {
    width: 25%
  }
  .column.is-4,
  .column.is-4-tablet {
    width: 33.33333%
  }
  .column.is-5,
  .column.is-5-tablet {
    width: 41.66667%
  }
  .column.is-6,
  .column.is-6-tablet {
    width: 50%
  }
  .column.is-7,
  .column.is-7-tablet {
    width: 58.33333%
  }
  .column.is-8,
  .column.is-8-tablet {
    width: 66.66667%
  }
  .column.is-9,
  .column.is-9-tablet {
    width: 75%
  }
  .column.is-10,
  .column.is-10-tablet {
    width: 83.33333%
  }
  .column.is-11,
  .column.is-11-tablet {
    width: 91.66667%
  }
  .column.is-12,
  .column.is-12-tablet {
    width: 100%
  }
}

@media screen and (min-width:1024px) {
  .column.is-1-desktop,
  .column.is-2-desktop,
  .column.is-3-desktop,
  .column.is-4-desktop,
  .column.is-5-desktop,
  .column.is-6-desktop,
  .column.is-7-desktop,
  .column.is-8-desktop,
  .column.is-9-desktop,
  .column.is-10-desktop,
  .column.is-11-desktop,
  .column.is-12-desktop {
    flex: none
  }
  .column.is-1-desktop {
    width: 8.33333%
  }
  .column.is-2-desktop {
    width: 16.66667%
  }
  .column.is-3-desktop {
    width: 25%
  }
  .column.is-4-desktop {
    width: 33.33333%
  }
  .column.is-5-desktop {
    width: 41.66667%
  }
  .column.is-6-desktop {
    width: 50%
  }
  .column.is-7-desktop {
    width: 58.33333%
  }
  .column.is-8-desktop {
    width: 66.66667%
  }
  .column.is-9-desktop {
    width: 75%
  }
  .column.is-10-desktop {
    width: 83.33333%
  }
  .column.is-11-desktop {
    width: 91.66667%
  }
  .column.is-12-desktop {
    width: 100%
  }
}

button:focus {
  outline: 0
}

.button {
  font-family: 'Beaufort';
  text-transform: uppercase;
  font-size: 18px;
  color: #f0e6d2;
  padding: .75rem 2rem
}

.button.is-tiny {
  font-size: 16px;
  padding: .375rem 2rem;
  border-width: 2px!important
}

.button[disabled] {
  border-image: linear-gradient(#4c5155, #4c5155) 1!important;
  background: #1f242a!important;
  color: #4c5155!important
}

.button.is-primary {
  border: 3px solid transparent;
  background: #1e2328;
  border-image: linear-gradient(#08abac, #01698b) 1;
  transition: all ease .5s
}

.button.is-primary:not([disabled]):hover {
  background-image: url(img/btn.jpg);
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0 10px 4px rgba(192, 252, 253, .4), inset 0 0 5px 2px rgba(192, 252, 253, .3);
  border: 3px solid rgba(192, 252, 253, .75);
  cursor: pointer
}

.button.is-secondary {
  border: 3px solid;
  border-radius: 0;
  background: #242731;
  border-image: linear-gradient(#f6c97f, #ca9d4b) 1;
  transition: all ease .25s
}

.button.is-secondary:not([disabled]):hover {
  box-shadow: 0 0 5px 2px rgba(192, 252, 253, .4), inset 0 0 5px 2px rgba(192, 252, 253, .3);
  border: 3px solid #eee2cc;
  cursor: pointer
}

.arrow-button {
  display: inline-flex;
  position: relative;
  background-color: #000a17;
  padding: 5px;
  border: 1px solid #c8a763;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px
}

.arrow-button::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  height: 32px;
  width: 32px;
  box-sizing: border-box;
  border: 2px solid #05222d
}

.arrow-button .main {
  shape-outside: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
  background: linear-gradient(#018699, #006284);
  height: 32px;
  min-width: 150px;
  cursor: pointer;
  border: 0;
  font-family: 'Beaufort';
  font-weight: bold;
  font-size: 16px;
  color: #a3c0c0;
  text-transform: uppercase;
  position: relative;
  margin-left: -16px;
  padding: 0 48px
}

.arrow-button .main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  shape-outside: polygon(2px 2px, calc(100% - 22px) 2px, calc(100% - 4px) 50%, calc(100% - 22px) calc(100% - 2px), 2px calc(100% - 2px));
  clip-path: polygon(2px 2px, calc(100% - 16px) 2px, calc(100% - 3px) 50%, calc(100% - 16px) calc(100% - 2px), 2px calc(100% - 2px));
  background-color: #1e222c;
  height: 32px;
  width: 100%;
  z-index: -1
}

.arrow-button .main::after {
  content: '';
  position: absolute;
  top: -7px;
  left: -23px;
  height: 42px;
  width: 42px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(#000a17, #000a17) padding-box, linear-gradient(#018699, #006284) border-box
}

.arrow-button .circle {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(#202425, #202425) padding-box, linear-gradient(#c8a763, #715b29) border-box;
  color: #c5c09a;
  cursor: pointer;
  z-index: 1
}

.arrow-button:not(.is-disabled) .main:hover {
  background: linear-gradient(#83d7ca, #1f8faf);
  color: #e2e2d8
}

.arrow-button:not(.is-disabled) .main:hover::before {
  background: linear-gradient(#152932, #0d394a)
}

.arrow-button:not(.is-disabled) .main:hover::after {
  background: linear-gradient(#000a17, #000a17) padding-box, linear-gradient(#83d7ca, #1f8faf) border-box
}

.arrow-button:not(.is-disabled) .circle:hover {
  background: linear-gradient(#202425, #202425) padding-box, linear-gradient(#d4cdca, #a37b2e) border-box;
  color: #f4eada
}

.arrow-button.is-disabled .main {
  background: #4c5155;
  color: #4c5155
}

.arrow-button.is-disabled .main::before {
  background: #1f242a
}

.arrow-button.is-disabled .main::after {
  background: linear-gradient(#000a17, #000a17) padding-box, linear-gradient(#4c5155, #4c5155) border-box
}

.arrow-button.is-disabled .circle {
  background: linear-gradient(#1f242a, #1f242a) padding-box, linear-gradient(#4c5155, #4c5155) border-box;
  color: #4c5155
}